<template>
  <div class="question">
    <div class="search">
      <el-form :inline="true">
        <el-form-item label="题型：">
          <el-select v-model="params.questionType" placeholder="请选择" style="width: 200px" clearable>
            <el-option label="单选题" :value="1" />
            <el-option label="多选题" :value="2" />
            <el-option label="判断题" :value="3" />
            <el-option label="填空题" :value="4" />
            <el-option label="简答题" :value="5" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 列表 -->
    <el-table v-loading="loading" :data="tableData" border style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="Id" width="50" />
      <el-table-column prop="questionType" label="题型" width="160">
        <template v-slot="scope">
          <span v-if="scope.row.questionType == 1">单选题</span>
          <span v-else-if="scope.row.questionType == 2">多选题</span>
          <span v-else-if="scope.row.questionType == 3">判断题</span>
          <span v-else-if="scope.row.questionType == 4">填空题</span>
          <span v-else-if="scope.row.questionType == 5">简答题</span>
        </template>
      </el-table-column>
      <el-table-column prop="shortTitle" label="题干" />
    </el-table>

    <!-- 分页 -->
    <div style="margin-top: 20px">
      <el-pagination v-model:current-page="params.pageIndex" v-model:page-size="params.pageSize"
        :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script setup lang="ts">
import ExamAPI, { QuestionParams, QuestionItem, SubjectResponse } from "@/api/system/exam.api";

const props = defineProps(["subjectId"]);
// console.log(props);

let subjectData = ref<SubjectResponse[]>([]);
let tableData = ref<QuestionItem[]>([]);
let loading = ref(false);
let total = ref(0);

const emit = defineEmits()
// 存储选中的题目数据（与表格行数据类型 QuestionItem 匹配）
const ids = ref<(string | number)[]>([]);
//选择变化
function handleSelectionChange(val: QuestionItem[]) {
  // console.log(val);
  ids.value = val.map(item => item.id)
  emit("selectedIds", ids.value)
}

//分页逻辑
const handleSizeChange = (val: number) => {
  params.value.pageSize = val;
  getList();
};
//点击选择事件
const handleCurrentChange = (val: number) => {
  params.value.pageIndex = val;
  getList();
};

//初始化列表参数params
const params = ref<QuestionParams>({
  id: null,
  questionType: null,
  level: null,
  subjectId: props.subjectId ? props.subjectId : null,
  pageIndex: 1,
  pageSize: 5,
});

//初始化列表
function getList() {
  loading.value = true;
  ExamAPI.getQuestion(params.value)
    .then((res) => {
      // console.log(res);
      tableData.value = res.list;
      total.value = res.total;
    })
    .finally(() => {
      loading.value = false;
    });
}
//初始化学科
function getSubject() {
  ExamAPI.getSubject().then((res) => {
    subjectData.value = res;
    // console.log(subjectData.value);
  });
}

//

//监听
watch(
  () => props.subjectId, // 监听父组件传递的学科ID
  (newSubjectId) => {
    params.value.subjectId = newSubjectId || null; // 同步更新筛选参数
    params.value.pageIndex = 1; // 可选：切换学科时重置到第一页
    getList(); // 重新查询新学科的题目
  }
);

//初始挂载
onMounted(() => {
  getSubject();
  getList();
});
</script>

<style scoped>
.question {
  padding: 16px;
}
</style>
